<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			margin: 150px auto;
		}
		.stage{
      position: relative;
			width: 200px;
			height: 200px;
			border: 1px solid #000; 
      /* 设置内部子元素在3D空间进行展示 */
      transform-style: preserve-3d;
      /* 透视 */
      perspective: 5000px;
      /* 过渡 */
      transition: all 4s ease;
			/* opacity: 0.5; */
		}
		
    .stage:hover {
      transform: rotateX(360deg) rotateY(360deg);
      -webkit-transform: rotateX(360deg) rotateY(360deg);
    }
		.stage div{
      position: absolute;
      left: 0;
      top: 0;
			width: 200px;
			height: 200px;
			font: bold 80px/200px "arial";
			text-align: center;
		}
		.stage div:nth-child(1){
			background-color: rgba(255,0,0,0.5);
      transform: translateZ(100px);
		}
		.stage div:nth-child(2){
			background-color: rgba(0,255,0,0.5);
      transform: rotateX(90deg) translateZ(100px);
		}
		.stage div:nth-child(3){
			background-color: rgba(0,0,255,0.5);
      transform: rotateX(180deg) translateZ(100px);
		}
		.stage div:nth-child(4){
			background-color: rgba(255,255,0,0.5);
      transform: rotateX(270deg) translateZ(100px);
		}
		.stage div:nth-child(5){
			background-color: rgba(255,0,255,0.5);
      transform: rotateY(90deg) translateZ(100px);
		}
		.stage div:nth-child(6){
			background-color: rgba(0,255,255,0.5);
      transform: rotateY(-90deg) translateZ(100px);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="stage">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</div>
</body>
</html>